<template>
  <div class="box">
    <div class="commonHeader">
      消防通道堆物
    </div>
    <div class="content">
      <div
        class="data-box"
        style="height:100%; display: flex;justify-content: space-around;
        align-items: center;"
      >
        <div class="line-box">
          <i class="t-l-line"></i>
          <i class="l-t-line"></i>
        </div>
        <div class="line-box">
          <i class="t-r-line"></i>
          <i class="r-t-line"></i>
        </div>
        <div class="line-box">
          <i class="b-l-line"></i>
          <i class="l-b-line"></i>
        </div>
        <div class="line-box">
          <i class="b-r-line"></i>
          <i class="r-b-line"></i>
        </div>
        <div class="inner-box">
          <el-row class="analysis-container">
            <el-col :span="6" class="analysis-box">
              <div class="equipment count">{{ deviceNum }}</div>
              <p class="desc">设备总数</p>
            </el-col>
            <el-col :span="6" class="analysis-box">
              <div class="online count">{{ heapEvent }}</div>
              <p class="desc">堆物事件</p>
            </el-col>
            <el-col :span="6" class="analysis-box">
              <div class="openDoor count">{{ processed }}</div>
              <p class="desc">已处理</p>
            </el-col>
            <el-col :span="6" class="analysis-box">
              <div class="jishi count">{{ ontimeRate }}</div>
              <p class="desc">及时率</p>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as api from "@/api";

export default {
  data() {
    return {
      deviceNum: "",
      heapEvent: "",
      processed: "",
      ontimeRate: ""
    };
  },
  mounted() {
    this.getDeviceIncident();
    this.timer = setInterval(() => {
      this.getDeviceIncident();
    }, 60000);
  },
  methods: {
    async getDeviceIncident() {
      let data = await api.getDeviceIncident();
      this.deviceNum = data.deviceNum;
      this.heapEvent = data.heapEvent;
      this.processed = data.processed;
      this.ontimeRate = data.ontimeRate;
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
};
</script>
<style lang="less" scoped>
.box {
  height: 25%;
  .content {
    padding-top: 0.5rem;
    box-sizing: border-box;
    height: calc(100% - 2rem);
    .inner-box {
      width: 100%;
      .analysis-container {
        .analysis-box {
          display: flex;
          flex-direction: column;
          align-items: center;
          .count {
            height: 72px;
            width: 72px;
            line-height: 72px;
            text-align: center;
            margin: 0 0.5rem;
          }
          .desc {
            padding-top: 10px;
            font-weight: 500;
            font-size: 14px;
          }
          .equipment {
            background: url("../../assets/icon_xiaoquBG.png") no-repeat;
            background-size: cover;
          }
          .online {
            background: url("../../assets/icon_juminBG.png") no-repeat;
            background-size: cover;
          }
          .openDoor {
            background: url("../../assets/icon_cheliangBG.png") no-repeat;
            background-size: cover;
          }
          .jishi{
            background: url("../../assets/icon_shebeiBG.png") no-repeat;
            background-size: cover;
          }
        }
      }
      .elevator-container {
        margin: 0 1rem;
        padding-bottom: 10px;
        background: rgba(255, 255, 255, 0.05);
      }
      .elevatorTabs {
        padding: 0;
        overflow: hidden;
        li {
          padding: 5px 0 0;
          width: 50%;
          float: left;
          list-style: none;
          text-align: center;
          font-size: 14px;
          background: rgba(255, 255, 255, 0.04);
        }
        p {
          display: inline-block;
          padding-bottom: 2px;
          width: 24px;
        }
        p.active {
          border-bottom: 2px solid #fff;
        }
      }
      .grid-container {
        padding: 10px;
        .grid-content {
          display: flex;
          flex-direction: column;
          align-items: center;
          img {
            height: 24px;
            width: 24px;
          }
          &--title {
            padding-top: 5px;
            font-size: 10px;
            font-weight: 500;
          }
        }
      }
    }
  }
}
</style>
